<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
		  @up="upCallback">
			<view class="search">
			  
			</view>
			<view class="content">
				<view v-for="(activity,index) in activitys" :key="index" @click="onTargetDetail(activity.activity_id)">
					<view class="image-container">
						<image class="image" :src="activity.image_url"></image>
						<view class="registration-label">{{activity.status_text}}</view>
						<view class="enrollment-count">{{activity.number}} 人报名</view>
					</view>
					<view class="activity-item-content">
						<view>
							<text class="category">{{activity.category}}</text>
							<text class="title">{{activity.name}}</text>
						</view>
						<view class="info">{{activity.date}} | {{activity.week}} | {{activity.destination_address}} | {{activity.distance}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
import * as Api from '@/api/activity'
import { getEmptyPaginateObj, getMoreListData } from '@/core/app'

const pageSize = 15

export default{
	mixins: [MescrollMixin],
	data(){
		return {
			options: {},
			activitys:[],
			// 上拉加载配置
			upOption: {
			  // 首次自动执行
			  auto: true,
			  // 每页数据的数量; 默认10
			  page: { size: pageSize },
			  // 数量要大于4条才显示无更多数据
			  noMoreSize: 4,
			}
		}
	},
	onLoad(options) {
	  // 记录options
	  this.options = options
	},
	methods:{
		upCallback(page) {
		  const app = this
		  // 设置列表数据
		  app.getActivityList(page.num)
		    .then(list => {
		      const curPageLen = list.data.length
		      const totalSize = list.data.total
		      app.mescroll.endBySize(curPageLen, totalSize)
		    })
		    .catch(() => app.mescroll.endErr())
		},
		getActivityList(pageNo = 1) {
		  const app = this
		  const param = {
		    categoryId: app.options.categoryId || 0,
		    activityName: app.options.search || '',
		    page: pageNo
		  }
		  return new Promise((resolve, reject) => {
		    Api.list(param)
		      .then(result => {
		        // 合并新数据
		        const newList = result.data.list
				console.log(newList)
		        app.activitys = getMoreListData(newList, app.activitys, pageNo)
				console.log(app.activitys)
		        resolve(newList)
		      })
		      .catch(reject)
		  })
		},
		// 跳转商品详情页
		onTargetDetail(activityId) {
			this.$navTo('pages/operation/detail', { activityId })
		},
	}
}
</script>

<style lang="scss" scoped>
	.image-container {
	    position: relative; // 相对定位，作为标签的定位参考
		height:300rpx;
		.image {
			display: block;
			width: 100%;
			height: 300rpx;
		}
	
	    .registration-label {
	      position: absolute; // 绝对定位到图片右上角
	      top: 10rpx;
	      right: 10rpx;
	      background-color: #ff0000; // 标签背景颜色
	      color: #ffffff; // 标签文字颜色
	      padding: 5rpx 10rpx; // 标签内边距
	      border-radius: 5rpx; // 标签圆角
	      font-size: 24rpx; // 标签文字大小
	    }
		
		// 新增报名人数提示样式
		.enrollment-count {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
			background-color: rgba(0, 0, 0, 0.7);
			color: #ffffff;
			padding: 5rpx 10rpx;
			border-radius: 5rpx;
			font-size: 24rpx;
		}
	  }
	.activity-item-content{
		margin-top:20rpx;
		margin-left: 20rpx;
		
		.title{
			font-size: 32rpx;
		}
		
		.category{
			font-size:28rpx;
			margin-right: 10rpx;
			padding:5rpx;
			background-color: greenyellow;
		}
		
		.info{	
			margin-top: 20rpx;
		}
	}
</style>